<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.year"
        type="number"
        placeholder="请输入年份"
        style="width: 200px;"
        class="filter-item"
      />
      <el-input
        v-model="listQuery.month"
        type="number"
        placeholder="请输入月份"
        style="width: 200px;"
        class="filter-item"
      />
      <el-input
        v-model="listQuery.week"
        type="number"
        placeholder="请输入周"
        style="width: 200px;"
        class="filter-item"
      />
      <el-input
        v-model="listQuery.batchNo"
        placeholder="请输入批次号"
        style="width: 200px;"
        class="filter-item"
      />
      <el-select v-model="listQuery.lineNo" placeholder="请选择生产线" clearable style="width: 200px" class="filter-item">
        <el-option v-for="item in selectOptions" :key="item.key" :label="item.label" :value="item.key" />
      </el-select>
      <el-input
        v-model="listQuery.vehicleType"
        placeholder="请输入车型"
        style="width: 200px;"
        class="filter-item"
      />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        查询
      </el-button>
      <el-button v-waves class="filter-item" type="info" icon="el-icon-refresh" @click="handleReset">
        重置
      </el-button>
    </div>
    <el-row>
      <el-col v-for="(item, index) in routerList" :key="index" :span="6">
        <div class="chart" :style="chartStyle" />
      </el-col>
    </el-row>
  </div>
</template>
<script>
import echarts from "echarts";
import resize from "../mixins/resize";
import { fetchPlanExecuteList } from "@/api/bdc/output-chart";
import waves from "@/directive/waves"; // waves directive
import { parseTime } from "@/utils";
const selectOptions = [
  { key: "0", label: "计划一" },
  { key: "1", label: "计划二" },
  { key: "2", label: "计划三" },
  { key: "3", label: "计划四" },
  { key: "4", label: "计划五" }
];
export default {
  name: "PlanExecuteChart",
  directives: { waves },
  mixins: [resize],
  data() {
    return {
      // 查询模块
      listQuery: {
        year: undefined,
        month: undefined,
        week: undefined,
        batchNo: undefined,
        lineNo: undefined,
        vehicleType: undefined
      },
      selectOptions: selectOptions,
      // echarts
      chart: null,
      chartStyle: { width: "100%", height: '300px' },
      routerList: []
    };
  },
  // watch: {
  //   routerList: {
  //     deep: true,
  //     handler(val) {
  //       this.setOptions(val)
  //     }
  //   }
  // },
  mounted() {
    // test
    this.routerList = [
      { complete: 100, uncomplete: 0 },
      { complete: 90, uncomplete: 10 },
      { complete: 88, uncomplete: 12 },
      { complete: 80, uncomplete: 20 },
      { complete: 75, uncomplete: 25 },
      { complete: 70, uncomplete: 30 },
      { complete: 60, uncomplete: 40 }
    ];
    // this.$nextTick(() => {
    //   this.setOptions()
    // })
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    // test
    radomData() {
      const complete = Math.ceil(Math.random() * 100);
      const uncomplete = 100 - complete;
      const item = {
        complete: complete,
        uncomplete: uncomplete
      };
      return item;
    },
    formatChartData(list) {
      let formatArr = [];
      for (const i of list) {
        let element = {
          title: '',
          series: []
        }
        for (const key in i) {
          if (i.hasOwnProperty(key)) {
            const item = i[key];
            switch (key) {
              case 'name':
                element.title = item
                break;
              case 'accomplish':
                element.series.push({ name: "已完成", value: item })
                break;
              case 'unfinished':
                element.series.push({ name: "未完成", value: item })
                break;
              default:
                break;
            }
          }
        }
        formatArr.push(element);
      }
      return formatArr;
    },
    // 查询
    handleFilter() {
      // this.getList()
      // this.routerList = this.routerList.map(a => this.radomData());
      // this.setOptions();
      // 格式化数据
      let month
      if(this.listQuery.month) {
        month = this.listQuery.month.toString()
        if (month.length === 1) month = '0' + month
      }
      let week
      if(this.listQuery.week) {
        week = this.listQuery.week.toString()
        if (week.length === 1) week = '0' + week
      }
      const data = {
        year: this.listQuery.year,
        month: month,
        week: week,
        batchNo: this.listQuery.batchNo,
        lineNo: this.listQuery.lineNo,
        vehicleType: this.listQuery.vehicleType
      }
      fetchPlanExecuteList(data).then(res => {
        if (res.code == 200) {
          // 初始化
          this.chartData = []
          this.chartData = this.formatChartData(res.data)
          console.log('res.data', res.data)
          this.setOptions()
        } else {
          this.$message.error("服务器内部错误！");
        }
      });
    },
    // 重置
    handleReset() {
      this.listQuery = {
        year: undefined,
        month: undefined,
        week: undefined,
        batchNo: undefined,
        lineNo: undefined,
        vehicleType: undefined
      };
    },
    // initChart() {
    //   this.chart = echarts.init(this.$refs.chart)
    //   this.setOptions(this.chartData)
    // },
    setOptions() {
      // const chartData = this.formatChartData(this.routerList);
      for (let i = 0; i < this.chartData.length; i++) {
        const element = this.chartData[i];
        const chart = echarts.init(document.getElementsByClassName("chart")[i]);
        chart.setOption({
          title: {
            text: element.title,
            x: "center"
          },
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          series: [
            {
              name: "完成量",
              type: "pie",
              radius: "55%",
              center: ["50%", "50%"],
              data: element.series,
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)"
                },
                normal:{
                          color:function(params) {
                            //自定义颜色
                            const colorList = ["#626C91", "#01E17E", "#FE5656", "#3DD1F9", "#FFAD05"];
                            return colorList[params.dataIndex]
                          }
                        }
              }
            }
          ]
        });
      }
    }
  }
};
</script>